
<div class="page-header position-relative">
    <h1>
        Dashboard
        <small>
            <i class="icon-double-angle-right"></i>
            overview &amp; stats
        </small>
    </h1>
</div><!--/.page-header-->

<div class="row-fluid">
<!--PAGE CONTENT BEGINS HERE-->

<div class="alert alert-block alert-success">
    <button type="button" class="close" data-dismiss="alert">
        <i class="icon-remove"></i>
    </button>

    <i class="icon-ok green"></i>

    Welcome to
    <strong class="green">
        Ace
        <small>(v1.1)</small></strong>, the lightweight, feature-rich, easy to use and well-documented admin template.
</div>

<div class="space-6"></div>

<div class="row-fluid">
    <div class="span7 infobox-container">
        <div class="infobox infobox-green  ">
            <div class="infobox-icon">
                <i class="icon-comments"></i>
            </div>

            <div class="infobox-data">
                <span class="infobox-data-number">32</span>
                <div class="infobox-content">comments + 2 reviews</div>
            </div>
            <div class="stat stat-success">8%</div>
        </div>

        <div class="infobox infobox-blue  ">
            <div class="infobox-icon">
                <i class="icon-twitter"></i>
            </div>

            <div class="infobox-data">
                <span class="infobox-data-number">11</span>
                <div class="infobox-content">new followers</div>
            </div>

            <div class="badge badge-success">
                +32%
                <i class="icon-arrow-up"></i>
            </div>
        </div>

        <div class="infobox infobox-pink  ">
            <div class="infobox-icon">
                <i class="icon-shopping-cart"></i>
            </div>

            <div class="infobox-data">
                <span class="infobox-data-number">8</span>
                <div class="infobox-content">new orders</div>
            </div>
            <div class="stat stat-important">+4%</div>
        </div>

        <div class="infobox infobox-red  ">
            <div class="infobox-icon">
                <i class="icon-beaker"></i>
            </div>

            <div class="infobox-data">
                <span class="infobox-data-number">7</span>
                <div class="infobox-content">experiments</div>
            </div>
        </div>

        <div class="infobox infobox-orange2  ">
            <div class="infobox-chart">
                <span class="sparkline" data-values="196,128,202,177,154,94,100,170,224"><canvas width="44" height="33" style="display: inline-block; width: 44px; height: 33px; vertical-align: top;"></canvas></span>
            </div>

            <div class="infobox-data">
                <span class="infobox-data-number">6,251</span>
                <div class="infobox-content">pageviews</div>
            </div>

            <div class="badge badge-success">
                7.2%
                <i class="icon-arrow-up"></i>
            </div>
        </div>

        <div class="infobox infobox-blue2  ">
            <div class="infobox-progress">
                <div class="easy-pie-chart percentage easyPieChart" data-percent="42" data-size="46" style="width: 46px; height: 46px; line-height: 46px;">
                    <span class="percent">42</span>%
                    <canvas width="46" height="46"></canvas></div>
            </div>

            <div class="infobox-data">
                <span class="infobox-text">traffic used</span>

                <div class="infobox-content">
                    <span class="bigger-110">~</span>
                    58GB remaining
                </div>
            </div>
        </div>

        <div class="space-6"></div>

        <div class="infobox infobox-green infobox-small infobox-dark">
            <div class="infobox-progress">
                <div class="easy-pie-chart percentage easyPieChart" data-percent="61" data-size="39" style="width: 39px; height: 39px; line-height: 39px;">
                    <span class="percent">61</span>%
                    <canvas width="39" height="39"></canvas></div>
            </div>

            <div class="infobox-data">
                <div class="infobox-content">Task</div>
                <div class="infobox-content">Completion</div>
            </div>
        </div>

        <div class="infobox infobox-blue infobox-small infobox-dark">
            <div class="infobox-chart">
                <span class="sparkline" data-values="3,4,2,3,4,4,2,2"><canvas width="39" height="19" style="display: inline-block; width: 39px; height: 19px; vertical-align: top;"></canvas></span>
            </div>

            <div class="infobox-data">
                <div class="infobox-content">Earnings</div>
                <div class="infobox-content">$32,000</div>
            </div>
        </div>

        <div class="infobox infobox-grey infobox-small infobox-dark">
            <div class="infobox-icon">
                <i class="icon-download-alt"></i>
            </div>

            <div class="infobox-data">
                <div class="infobox-content">Downloads</div>
                <div class="infobox-content">1,205</div>
            </div>
        </div>
    </div>

    <div class="vspace"></div>

    <div class="span5">
        <div class="widget-box">
            <div class="widget-header widget-header-flat widget-header-small">
                <h5>
                    <i class="icon-signal"></i>
                    Traffic Sources
                </h5>

                <div class="widget-toolbar no-border">
                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                        This Week
                        <i class="icon-angle-down icon-on-right"></i>
                    </button>

                    <ul class="dropdown-menu dropdown-info pull-right dropdown-caret">
                        <li class="active">
                            <a href="#">This Week</a>
                        </li>

                        <li>
                            <a href="#">Last Week</a>
                        </li>

                        <li>
                            <a href="#">This Month</a>
                        </li>

                        <li>
                            <a href="#">Last Month</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <div id="piechart-placeholder" style="width: 90%; min-height: 150px; padding: 0px; position: relative;"><canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 381px; height: 150px;" width="381" height="150"></canvas><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 381px; height: 150px;" width="381" height="150"></canvas><div class="legend"><div style="position: absolute; width: 106px; height: 110px; top: 15px; right: -30px; background-color: rgb(255, 255, 255); opacity: 0.85;"> </div><table style="position:absolute;top:15px;right:-30px;;font-size:smaller;color:#545454"><tbody><tr><td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #68BC31;overflow:hidden"></div></div></td><td class="legendLabel">social networks</td></tr><tr><td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #2091CF;overflow:hidden"></div></div></td><td class="legendLabel">search engines</td></tr><tr><td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #AF4E96;overflow:hidden"></div></div></td><td class="legendLabel">ad campaings</td></tr><tr><td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #DA5430;overflow:hidden"></div></div></td><td class="legendLabel">direct traffic</td></tr><tr><td class="legendColorBox"><div style="border:1px solid null;padding:1px"><div style="width:4px;height:0;border:5px solid #FEE074;overflow:hidden"></div></div></td><td class="legendLabel">other</td></tr></tbody></table></div></div>

                    <div class="hr hr8 hr-double"></div>

                    <div class="clearfix">
                        <div class="grid3">
													<span class="grey">
														<i class="icon-facebook-sign icon-2x blue"></i>
														&nbsp; likes
													</span>
                            <h4 class="bigger pull-right">1,255</h4>
                        </div>

                        <div class="grid3">
													<span class="grey">
														<i class="icon-twitter-sign icon-2x purple"></i>
														&nbsp; tweets
													</span>
                            <h4 class="bigger pull-right">941</h4>
                        </div>

                        <div class="grid3">
													<span class="grey">
														<i class="icon-pinterest-sign icon-2x red"></i>
														&nbsp; pins
													</span>
                            <h4 class="bigger pull-right">1,050</h4>
                        </div>
                    </div>
                </div><!--/widget-main-->
            </div><!--/widget-body-->
        </div><!--/widget-box-->
    </div><!--/span-->
</div><!--/row-->

<div class="hr hr32 hr-dotted"></div>

<div class="row-fluid">
    <div class="span5">
        <div class="widget-box transparent">
            <div class="widget-header widget-header-flat">
                <h4 class="lighter">
                    <i class="icon-star orange"></i>
                    Popular Domains
                </h4>

                <div class="widget-toolbar">
                    <a href="#" data-action="collapse">
                        <i class="icon-chevron-up"></i>
                    </a>
                </div>
            </div>

            <div class="widget-body"><div class="widget-body-inner">
                <div class="widget-main no-padding">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>
                                <i class="icon-caret-right blue"></i>
                                name
                            </th>

                            <th>
                                <i class="icon-caret-right blue"></i>
                                price
                            </th>

                            <th class="hidden-phone">
                                <i class="icon-caret-right blue"></i>
                                status
                            </th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td>internet.com</td>

                            <td>
                                <small>
                                    <s class="red">$29.99</s>
                                </small>
                                <b class="green">$19.99</b>
                            </td>

                            <td class="hidden-phone">
                                <span class="label label-info arrowed-right arrowed-in">on sale</span>
                            </td>
                        </tr>

                        <tr>
                            <td>online.com</td>

                            <td>
                                <small>
                                    <s class="red"></s>
                                </small>
                                <b class="green">$16.45</b>
                            </td>

                            <td class="hidden-phone">
                                <span class="label label-success arrowed-in arrowed-in-right">approved</span>
                            </td>
                        </tr>

                        <tr>
                            <td>newnet.com</td>

                            <td>
                                <small>
                                    <s class="red"></s>
                                </small>
                                <b class="green">$15.00</b>
                            </td>

                            <td class="hidden-phone">
                                <span class="label label-important arrowed">pending</span>
                            </td>
                        </tr>

                        <tr>
                            <td>web.com</td>

                            <td>
                                <small>
                                    <s class="red">$24.99</s>
                                </small>
                                <b class="green">$19.95</b>
                            </td>

                            <td class="hidden-phone">
															<span class="label arrowed">
																<s>out of stock</s>
															</span>
                            </td>
                        </tr>

                        <tr>
                            <td>domain.com</td>

                            <td>
                                <small>
                                    <s class="red"></s>
                                </small>
                                <b class="green">$12.00</b>
                            </td>

                            <td class="hidden-phone">
                                <span class="label label-warning arrowed arrowed-right">SOLD</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div><!--/widget-main-->
            </div></div><!--/widget-body-->
        </div><!--/widget-box-->
    </div>

    <div class="span7">
        <div class="widget-box transparent">
            <div class="widget-header widget-header-flat">
                <h4 class="lighter">
                    <i class="icon-signal"></i>
                    Sale Stats
                </h4>

                <div class="widget-toolbar">
                    <a href="#" data-action="collapse">
                        <i class="icon-chevron-up"></i>
                    </a>
                </div>
            </div>

            <div class="widget-body"><div class="widget-body-inner">
                <div class="widget-main padding-4">
                    <div id="sales-charts" style="width: 100%; height: 220px; padding: 0px; position: relative;"><canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 641px; height: 220px;" width="641" height="220"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 80px; top: 199px; left: 33px; text-align: center;">0.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 80px; top: 199px; left: 128px; text-align: center;">1.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 80px; top: 199px; left: 223px; text-align: center;">2.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 80px; top: 199px; left: 318px; text-align: center;">3.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 80px; top: 199px; left: 414px; text-align: center;">4.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 80px; top: 199px; left: 509px; text-align: center;">5.0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 80px; top: 199px; left: 604px; text-align: center;">6.0</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 184px; left: 1px; text-align: right;">-2.000</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 161px; left: 1px; text-align: right;">-1.500</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 138px; left: 1px; text-align: right;">-1.000</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 115px; left: 1px; text-align: right;">-0.500</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 92px; left: 5px; text-align: right;">0.000</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 69px; left: 5px; text-align: right;">0.500</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 46px; left: 5px; text-align: right;">1.000</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 23px; left: 5px; text-align: right;">1.500</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 0px; left: 5px; text-align: right;">2.000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 641px; height: 220px;" width="641" height="220"></canvas><div class="legend"><div style="position: absolute; width: 72px; height: 66px; top: 15px; right: 14px; background-color: rgb(255, 255, 255); opacity: 0.85;"> </div><table style="position:absolute;top:15px;right:14px;;font-size:smaller;color:#545454"><tbody><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(237,194,64);overflow:hidden"></div></div></td><td class="legendLabel">Domains</td></tr><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(175,216,248);overflow:hidden"></div></div></td><td class="legendLabel">Hosting</td></tr><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(203,75,75);overflow:hidden"></div></div></td><td class="legendLabel">Services</td></tr></tbody></table></div></div>
                </div><!--/widget-main-->
            </div></div><!--/widget-body-->
        </div><!--/widget-box-->
    </div>
</div>

<div class="hr hr32 hr-dotted"></div>

<div class="row-fluid">
<div class="span6">
<div class="widget-box transparent" id="recent-box">
<div class="widget-header">
    <h4 class="lighter smaller">
        <i class="icon-rss orange"></i>
        RECENT
    </h4>

    <div class="widget-toolbar no-border">
        <ul class="nav nav-tabs" id="recent-tab">
            <li class="active">
                <a data-toggle="tab" href="#task-tab">Tasks</a>
            </li>

            <li>
                <a data-toggle="tab" href="#member-tab">Members</a>
            </li>

            <li>
                <a data-toggle="tab" href="#comment-tab">Comments</a>
            </li>
        </ul>
    </div>
</div>

<div class="widget-body">
<div class="widget-main padding-4">
<div class="tab-content padding-8">
<div id="task-tab" class="tab-pane active">
    <h4 class="smaller lighter green">
        <i class="icon-list"></i>
        Sortable Lists
    </h4>

    <ul id="tasks" class="item-list ui-sortable">
        <li class="item-orange">
            <label class="inline">
                <input type="checkbox">
                <span class="lbl"> Answering customer questions</span>
            </label>

            <div class="pull-right easy-pie-chart percentage easyPieChart" data-size="30" data-color="#ECCB71" data-percent="42" style="width: 30px; height: 30px; line-height: 30px;">
                <span class="percent">42</span>%
                <canvas width="30" height="30"></canvas></div>
        </li>

        <li class="item-red">
            <label class="inline">
                <input type="checkbox">
                <span class="lbl"> Fixing bugs</span>
            </label>

            <div class="pull-right">
                <div class="btn-group">
                    <button class="btn btn-mini btn-info">
                        <i class="icon-edit bigger-125"></i>
                    </button>

                    <button class="btn btn-mini btn-danger ">
                        <i class="icon-trash bigger-125"></i>
                    </button>

                    <button class="btn btn-mini btn-yellow">
                        <i class="icon-flag bigger-125"></i>
                    </button>
                </div>
            </div>
        </li>

        <li class="item-default">
            <label class="inline">
                <input type="checkbox">
                <span class="lbl"> Adding new features</span>
            </label>

            <div class="inline pull-right position-relative">
                <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-angle-down icon-only bigger-120"></i>
                </button>

                <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-closer">
                    <li>
                        <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-placement="left" data-original-title="Mark&nbsp;as&nbsp;done">
																			<span class="green">
																				<i class="icon-ok"></i>
																			</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-placement="left" data-original-title="Delete">
																			<span class="red">
																				<i class="icon-trash"></i>
																			</span>
                        </a>
                    </li>
                </ul>
            </div>
        </li>

        <li class="item-blue">
            <label class="inline">
                <input type="checkbox">
                <span class="lbl"> Upgrading scripts used in template</span>
            </label>
        </li>

        <li class="item-grey">
            <label class="inline">
                <input type="checkbox">
                <span class="lbl"> Adding new skins</span>
            </label>
        </li>

        <li class="item-green">
            <label class="inline">
                <input type="checkbox">
                <span class="lbl"> Updating server software up</span>
            </label>
        </li>

        <li class="item-pink">
            <label class="inline">
                <input type="checkbox">
                <span class="lbl"> Cleaning up</span>
            </label>
        </li>
    </ul>
</div>

<div id="member-tab" class="tab-pane">
<div class="clearfix">
<div class="itemdiv memberdiv">
    <div class="user">
        <img alt="Bob Doe's avatar" src="assets/avatars/user.jpg">
    </div>

    <div class="body">
        <div class="name">
            <a href="#">Bob Doe</a>
        </div>

        <div class="time">
            <i class="icon-time"></i>
            <span class="green">20 min</span>
        </div>

        <div>
            <span class="label label-warning">pending</span>

            <div class="inline position-relative">
                <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-angle-down icon-only bigger-120"></i>
                </button>

                <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                    <li>
                        <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-placement="right" data-original-title="Approve">
																					<span class="green">
																						<i class="icon-ok"></i>
																					</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="tooltip-warning" data-rel="tooltip" title="" data-placement="right" data-original-title="Reject">
																					<span class="orange">
																						<i class="icon-remove"></i>
																					</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-placement="right" data-original-title="Delete">
																					<span class="red">
																						<i class="icon-trash"></i>
																					</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="itemdiv memberdiv">
    <div class="user">
        <img alt="Joe Doe's avatar" src="assets/avatars/avatar2.png">
    </div>

    <div class="body">
        <div class="name">
            <a href="#">Joe Doe</a>
        </div>

        <div class="time">
            <i class="icon-time"></i>
            <span class="green">1 hour</span>
        </div>

        <div>
            <span class="label label-warning">pending</span>

            <div class="inline position-relative">
                <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-angle-down icon-only bigger-120"></i>
                </button>

                <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                    <li>
                        <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-placement="right" data-original-title="Approve">
																					<span class="green">
																						<i class="icon-ok"></i>
																					</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="tooltip-warning" data-rel="tooltip" title="" data-placement="right" data-original-title="Reject">
																					<span class="orange">
																						<i class="icon-remove"></i>
																					</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-placement="right" data-original-title="Delete">
																					<span class="red">
																						<i class="icon-trash"></i>
																					</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="itemdiv memberdiv">
    <div class="user">
        <img alt="Jim Doe's avatar" src="assets/avatars/avatar.png">
    </div>

    <div class="body">
        <div class="name">
            <a href="#">Jim Doe</a>
        </div>

        <div class="time">
            <i class="icon-time"></i>
            <span class="green">2 hour</span>
        </div>

        <div>
            <span class="label label-warning">pending</span>

            <div class="inline position-relative">
                <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-angle-down icon-only bigger-120"></i>
                </button>

                <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                    <li>
                        <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-placement="right" data-original-title="Approve">
																					<span class="green">
																						<i class="icon-ok"></i>
																					</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="tooltip-warning" data-rel="tooltip" title="" data-placement="right" data-original-title="Reject">
																					<span class="orange">
																						<i class="icon-remove"></i>
																					</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-placement="right" data-original-title="Delete">
																					<span class="red">
																						<i class="icon-trash"></i>
																					</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="itemdiv memberdiv">
    <div class="user">
        <img alt="Alex Doe's avatar" src="assets/avatars/avatar2.png">
    </div>

    <div class="body">
        <div class="name">
            <a href="#">Alex Doe</a>
        </div>

        <div class="time">
            <i class="icon-time"></i>
            <span class="green">3 hour</span>
        </div>

        <div>
            <span class="label label-important">blocked</span>
        </div>
    </div>
</div>

<div class="itemdiv memberdiv">
    <div class="user">
        <img alt="Bob Doe's avatar" src="assets/avatars/avatar2.png">
    </div>

    <div class="body">
        <div class="name">
            <a href="#">Bob Doe</a>
        </div>

        <div class="time">
            <i class="icon-time"></i>
            <span class="green">6 hour</span>
        </div>

        <div>
            <span class="label label-success arrowed-in">approved</span>
        </div>
    </div>
</div>

<div class="itemdiv memberdiv">
    <div class="user">
        <img alt="Susan's avatar" src="assets/avatars/avatar3.png">
    </div>

    <div class="body">
        <div class="name">
            <a href="#">Susan</a>
        </div>

        <div class="time">
            <i class="icon-time"></i>
            <span class="green">yesterday</span>
        </div>

        <div>
            <span class="label label-success arrowed-in">approved</span>
        </div>
    </div>
</div>

<div class="itemdiv memberdiv">
    <div class="user">
        <img alt="Phil Doe's avatar" src="assets/avatars/avatar4.png">
    </div>

    <div class="body">
        <div class="name">
            <a href="#">Phil Doe</a>
        </div>

        <div class="time">
            <i class="icon-time"></i>
            <span class="green">2 days ago</span>
        </div>

        <div>
            <span class="label label-info arrowed-in  arrowed-in-right">online</span>
        </div>
    </div>
</div>

<div class="itemdiv memberdiv">
    <div class="user">
        <img alt="Alexa Doe's avatar" src="assets/avatars/avatar1.png">
    </div>

    <div class="body">
        <div class="name">
            <a href="#">Alexa Doe</a>
        </div>

        <div class="time">
            <i class="icon-time"></i>
            <span class="green">3 days ago</span>
        </div>

        <div>
            <span class="label label-success arrowed-in">approved</span>
        </div>
    </div>
</div>
</div>

<div class="center">
    <i class="icon-group icon-2x green"></i>

    &nbsp;
    <a href="#">
        See all members &nbsp;
        <i class="icon-arrow-right"></i>
    </a>
</div>

<div class="hr hr-double hr8"></div>
</div><!--member-tab-->

<div id="comment-tab" class="tab-pane">
    <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 300px;"><div class="comments" style="overflow: hidden; width: auto; height: 300px;">
        <div class="itemdiv commentdiv">
            <div class="user">
                <img alt="Bob Doe's Avatar" src="assets/avatars/avatar.png">
            </div>

            <div class="body">
                <div class="name">
                    <a href="#">Bob Doe</a>
                </div>

                <div class="time">
                    <i class="icon-time"></i>
                    <span class="green">6 min</span>
                </div>

                <div class="text">
                    <i class="icon-quote-left"></i>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis …
                </div>
            </div>

            <div class="tools">
                <div class="inline position-relative">
                    <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                        <i class="icon-angle-down icon-only bigger-120"></i>
                    </button>

                    <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                        <li>
                            <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-placement="left" data-original-title="Approve">
																				<span class="green">
																					<i class="icon-ok"></i>
																				</span>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="tooltip-warning" data-rel="tooltip" title="" data-placement="left" data-original-title="Reject">
																				<span class="orange">
																					<i class="icon-remove"></i>
																				</span>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-placement="left" data-original-title="Delete">
																				<span class="red">
																					<i class="icon-trash"></i>
																				</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="itemdiv commentdiv">
            <div class="user">
                <img alt="Jennifer's Avatar" src="assets/avatars/avatar1.png">
            </div>

            <div class="body">
                <div class="name">
                    <a href="#">Jennifer</a>
                </div>

                <div class="time">
                    <i class="icon-time"></i>
                    <span class="blue">15 min</span>
                </div>

                <div class="text">
                    <i class="icon-quote-left"></i>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis …
                </div>
            </div>

            <div class="tools">
                <a href="#" class="btn btn-minier btn-info">
                    <i class="icon-only icon-pencil"></i>
                </a>

                <a href="#" class="btn btn-minier btn-danger">
                    <i class="icon-only icon-trash"></i>
                </a>
            </div>
        </div>

        <div class="itemdiv commentdiv">
            <div class="user">
                <img alt="Joe's Avatar" src="assets/avatars/avatar2.png">
            </div>

            <div class="body">
                <div class="name">
                    <a href="#">Joe</a>
                </div>

                <div class="time">
                    <i class="icon-time"></i>
                    <span class="orange">22 min</span>
                </div>

                <div class="text">
                    <i class="icon-quote-left"></i>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis …
                </div>
            </div>

            <div class="tools">
                <a href="#" class="btn btn-minier btn-info">
                    <i class="icon-only icon-pencil"></i>
                </a>

                <a href="#" class="btn btn-minier btn-danger">
                    <i class="icon-only icon-trash"></i>
                </a>
            </div>
        </div>

        <div class="itemdiv commentdiv">
            <div class="user">
                <img alt="Rita's Avatar" src="assets/avatars/avatar3.png">
            </div>

            <div class="body">
                <div class="name">
                    <a href="#">Rita</a>
                </div>

                <div class="time">
                    <i class="icon-time"></i>
                    <span class="red">50 min</span>
                </div>

                <div class="text">
                    <i class="icon-quote-left"></i>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis …
                </div>
            </div>

            <div class="tools">
                <a href="#" class="btn btn-minier btn-info">
                    <i class="icon-only icon-pencil"></i>
                </a>

                <a href="#" class="btn btn-minier btn-danger">
                    <i class="icon-only icon-trash"></i>
                </a>
            </div>
        </div>
    </div><div class="slimScrollBar ui-draggable" style="background-color: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; right: 1px; background-position: initial initial; background-repeat: initial initial;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; background-color: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div>

    <div class="hr hr8"></div>

    <div class="center">
        <i class="icon-comments-alt icon-2x green"></i>

        &nbsp;
        <a href="#">
            See all comments &nbsp;
            <i class="icon-arrow-right"></i>
        </a>
    </div>

    <div class="hr hr-double hr8"></div>
</div>
</div>
</div><!--/widget-main-->
</div><!--/widget-body-->
</div><!--/widget-box-->
</div><!--/span-->

<div class="span6">
    <div class="widget-box ">
        <div class="widget-header">
            <h4 class="lighter smaller">
                <i class="icon-comment blue"></i>
                Conversation
            </h4>
        </div>

        <div class="widget-body">
            <div class="widget-main no-padding">
                <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 300px;"><div class="dialogs" style="overflow: hidden; width: auto; height: 300px;">
                    <div class="itemdiv dialogdiv">
                        <div class="user">
                            <img alt="Alexa's Avatar" src="assets/avatars/avatar1.png">
                        </div>

                        <div class="body">
                            <div class="time">
                                <i class="icon-time"></i>
                                <span class="green">4 sec</span>
                            </div>

                            <div class="name">
                                <a href="#">Alexa</a>
                            </div>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis.</div>

                            <div class="tools">
                                <a href="#" class="btn btn-minier btn-info">
                                    <i class="icon-only icon-share-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="itemdiv dialogdiv">
                        <div class="user">
                            <img alt="John's Avatar" src="assets/avatars/avatar.png">
                        </div>

                        <div class="body">
                            <div class="time">
                                <i class="icon-time"></i>
                                <span class="blue">38 sec</span>
                            </div>

                            <div class="name">
                                <a href="#">John</a>
                            </div>
                            <div class="text">Raw denim you probably haven't heard of them jean shorts Austin.</div>

                            <div class="tools">
                                <a href="#" class="btn btn-minier btn-info">
                                    <i class="icon-only icon-share-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="itemdiv dialogdiv">
                        <div class="user">
                            <img alt="Bob's Avatar" src="assets/avatars/user.jpg">
                        </div>

                        <div class="body">
                            <div class="time">
                                <i class="icon-time"></i>
                                <span class="orange">2 min</span>
                            </div>

                            <div class="name">
                                <a href="#">Bob</a>
                                <span class="label label-info arrowed arrowed-in-right">admin</span>
                            </div>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis.</div>

                            <div class="tools">
                                <a href="#" class="btn btn-minier btn-info">
                                    <i class="icon-only icon-share-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="itemdiv dialogdiv">
                        <div class="user">
                            <img alt="Jim's Avatar" src="assets/avatars/avatar4.png">
                        </div>

                        <div class="body">
                            <div class="time">
                                <i class="icon-time"></i>
                                <span class="grey">3 min</span>
                            </div>

                            <div class="name">
                                <a href="#">Jim</a>
                            </div>
                            <div class="text">Raw denim you probably haven't heard of them jean shorts Austin.</div>

                            <div class="tools">
                                <a href="#" class="btn btn-minier btn-info">
                                    <i class="icon-only icon-share-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="itemdiv dialogdiv">
                        <div class="user">
                            <img alt="Alexa's Avatar" src="assets/avatars/avatar1.png">
                        </div>

                        <div class="body">
                            <div class="time">
                                <i class="icon-time"></i>
                                <span class="green">4 min</span>
                            </div>

                            <div class="name">
                                <a href="#">Alexa</a>
                            </div>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

                            <div class="tools">
                                <a href="#" class="btn btn-minier btn-info">
                                    <i class="icon-only icon-share-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div><div class="slimScrollBar ui-draggable" style="background-color: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; right: 1px; height: 227.3357142857143px; background-position: initial initial; background-repeat: initial initial;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; background-color: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div>

                <form>
                    <div class="form-actions input-append">
                        <input placeholder="Type your message here ..." type="text" class="width-75" name="message">
                        <button class="btn btn-small btn-info no-radius" onclick="return false;">
                            <i class="icon-share-alt"></i>
                            <span class="hidden-phone">Send</span>
                        </button>
                    </div>
                </form>
            </div><!--/widget-main-->
        </div><!--/widget-body-->
    </div><!--/widget-box-->
</div><!--/span-->
</div><!--/row-->

<!--PAGE CONTENT ENDS HERE-->
</div><!--/row-->